<template>
    <!-- 新车上牌订单详情 -->
    <div class="box ">
        <h1>新车上牌订单详情</h1>
        <hr>
        <div class="main clear">
            <div class="left">
                <div class="left-1">
                    订单编号:
                    <div>
                        <div>{{ data.number }}</div>
                    </div>
                    <div>
                        订单类型:
                        <div>{{ data.orderType.orderType }}</div>
                    </div>
                    <div>
                        下单时间：
                        <div> {{ data.createTime }}</div>
                    </div>
                </div>
                <!-- 上牌司机 -->
                <div class="selectStyleDiv">
                    上牌司机:
                    <div class="selectStyleDiv clear">

                        <el-select v-model="driverArea" placeholder="选择区域" class="selectStyle"
                            @change="driverChange(driverArea)">
                            <el-option v-for="item in areaData" :key="item.id" :label="item.area" :value="item.area">
                            </el-option>
                        </el-select>

                        <el-select v-model="getDriver" placeholder="上牌司机" class="selectStyle">
                            <el-option v-for="item in getDriverData" :key="item.id" :label="item.name"
                                :value="item.name">
                            </el-option>
                        </el-select>
                    </div>
                </div>

                <div>
                    派工单位:
                    <div>
                        <el-input v-model="workCompany" placeholder="请输入公司名称" class="input2"></el-input>
                    </div>
                </div>
                <div>
                    订单状态:
                    <div>
                        <el-select v-model="orderStatus" class="input2" @change="orderStatusChange(orderStatus)">
                            <el-option v-for="item in getStatusData" :key="item.id" :label="item.orderStatus"
                                :value="item.orderStatus">
                            </el-option>
                        </el-select>
                    </div>
                </div>


<div>
                            联系人:
                            <div>
                                <el-input v-model="contactPerson" placeholder="请输入内容" class="input2"></el-input>
                            </div>
                        </div>
                        <div>
                            联系电话:
                            <div>
                                <el-input v-model="contactPhone" placeholder="请输入内容" class="input2"></el-input>
                            </div>
                        </div>

                

            </div>




            <div class="middle">
                <div>
                    是否需要赔款:
                    <div class="Bottom15px">
                        <el-radio v-model="radio" label="1">是</el-radio>
                    </div>
                </div>
                是否发送短信:
                <div class="Bottom15px">
                    <el-radio v-model="radio" label="1">是</el-radio>
                    <el-radio v-model="radio" label="2">否</el-radio>
                </div>
                短信内容:
            <div class="Bottom15px">
                <el-input type="textarea" :rows="4" class="textarea1" v-model="cusMessage">
                </el-input>
            </div>
            <div class="clear">
                <div class="message-left">短信操作:</div>
                <div class="message-right">已发送0次</div>
            </div>
            <div class="Bottom15px clear">
                <el-button type="primary" class="message-left">生成短信</el-button>
                <el-button type="primary" class="message-right">发送给用户</el-button>
            </div>
            <div>
                短信内容:
                <div class="Bottom15px">
                    <el-input type="textarea" :rows="4" class="textarea1" v-model="cusMessage">
                    </el-input>
                </div>
                <div class="clear">
                    <div class="message-left">短信操作:</div>
                    <div class="message-right">已发送0次</div>
                </div>
                <div class="Bottom15px clear">
                    <el-button type="primary" class="message-left">生成短信</el-button>
                    <el-button type="primary" class="message-right">发送给司机</el-button>
                </div>
                </div>
            </div>
            



                    <div class="right">
                        <div >
                    特定事项:
                    <div>
                        <el-input v-model="attention" class="Bottom15px input2"></el-input>
                    </div>

                </div>
                        <div>
                            车牌号:
                            <div>
                                <el-input v-model="carId" placeholder="请输入车牌号" class="input2"></el-input>
                            </div>
                        </div>

                        <div>
                            客户备注:
                            <div>
                                <el-input v-model="tip" placeholder="请输入内容" class="input2"></el-input>
                            </div>
                        </div>
                        <div class="right-1">
                            <ul class="pay1">
                                <li>支付单号:</li>
                                <li class="pay1-li">{{ orderInfo.number }}</li>
                                <li>支付方式:</li>
                                <li>微信支付/支付宝/xx银行</li>

                            </ul>

                            <ul class="pay">
                                <li>支付状态</li>
                                <li>{{ orderStatus }}</li>
                                <li>在线支付金额</li>
                                <li>0.00元data</li>
                                <li>优惠券付款</li>
                                <li>{{ orderInfo.coupon }}</li>
                            </ul>
                            <ul class="pay">
                                <li>订单总金额</li>
                                <li>{{ orderInfo.total }}</li>
                                <li>积分付款</li>
                                <li>{{ orderInfo.accumulatePoints }}</li>
                                <li>客服应付金额</li>
                                <li>0元data</li>
                            </ul>
                        </div>
                       


                    </div>
                </div>
                 <div  class="save">
                            <el-button type="primary" class="saveBtn" @click="orderAdd(
                                number, workCompany, orderStatus, carId, driverArea, getDriver, isMakeCompemsation, isSendMessage, attention, cusMessage,
                                driMessage, contactPerson, contactPhone, inspectPlaceMap, inspectPlace, tip
                            
                                // getCarTime, engineNumber,   registerP, receiveP,
                                // returnP, receiveMap, returnMap, tip, returnTime, pictureDesc, attachmentImg,
                                // photoAttachments,  reDriverArea, inspectArea
                            )">保存</el-button>
                            <el-button type="primary" @click="cancel" class="cancelBtn">取消</el-button>
                        </div>
            </div>
</template>
    

<script>

export default {

    created() {
        this.selectAll();
        console.log('路由传参', this.$route.params)
        this.selectOrderDetail(this.$route.params.data.number, this.$route.params.data.orderType.orderType,)
        this.getStatus();

    },
    data() {
        return {
            //路由传参数据
            data: this.$route.params.data,
            // 通过订单号及类型查询信息
            orderInfo: '',
            order: '',
            orderDetail: '',
            //传到后台的的数据
            //订单号 及Id
            number: '',
            orderId: '',
            //接车司机
            //区域公用数据
            areaData: [],
            driverArea: '',

            //取证司机
            getDriverData: [],
            getDriver: '',
            //支付状态、
            orderStatus: '',
            //派工单位
            workCompany: '',
            //车牌号
            carId: '',
            //修理厂公司,暂无数据


            //不知道是啥
            isMakeCompemsation: true,
            //是否发送消息 未作绑定
            isSendMessage: true,
            //客户短信信息
            cusMessage: '',
            //司机短信信息
            driMessage: '',
            //不知道时啥数据  消息操作
            messageOperate: '2', //需要绑定
            //接车时间
            getCarTime: '',

            //联系人及其电话
            contactPerson: '',
            contactPhone: '',
            //特定事项
            attention: '',
            //地图内容暂未做
            // receiveMap: "5466.235,54489.23",
            // returnMap: "36644.136,64455",
            //客户备注
            tip: "",
            //还车时间
            returnTime: '',

            radio: '1',
            input: '',
            // 订单状态  下拉框
            getStatusData: '',
            //不知道为啥有这数据
            inspectPlaceMap: "136,137",
            inspectPlace: "北京晨德宝汽车销售有限公司",


        }
    },
    methods: {
        //取消按钮
        cancel() {
            this.$router.push('/order')
        },
        //赋值函数
        fuZhi() {
            //请求后端的数据 赋值给当前页面
            this.order = this.data.number,
                // this.orderDetail= this.data.orderType.orderType,
                //传送后端的数据
                this.number = this.data.number;

            this.getDriver = this.data.diver;

            this.orderStatus = this.data.status.orderStatus;
            this.attention = this.orderDetail.attention;
            this.cusMessage = this.orderDetail.userMessageContent;
            this.driMessage = this.orderDetail.driverMessageContent;

            this.engineNumber = this.orderDetail.engineNumber;
            this.contactPerson = this.orderDetail.contactPerson;
            this.contactPhone = this.orderDetail.contactPhone;

            this.driverArea = this.orderInfo.driverArea
            //地图行程暂未做
            //this.receiveMap = this.orderDetail.receiveMap;
            //this.returnMap = this.orderDetail.returnMap;
            this.tip = this.orderDetail.tip
            this.orderId = this.orderInfo.id;
            this.workCompany = this.orderInfo.workCompany;
            this.carId = this.orderInfo.carId;


        },

        //保存验车订单
        orderAdd(
            orderNumber, orderWorkCompany, orderStatus, carId, s4Area, driver, isMakeCompemsation, isSendMessage, attention, userMessageContent,
            driverMessageContent, contactPerson, contactPhone, inspectPlaceMap, inspectPlace, tip
        ) {
            this.$http({
                url: '/newCarOrder/update',
                method: 'POST',
                data: {
                    orderNumber, orderWorkCompany, orderStatus, carId, s4Area, driver, isMakeCompemsation, isSendMessage, attention, userMessageContent,
                    driverMessageContent, contactPerson, contactPhone, inspectPlaceMap, inspectPlace, tip
                },
            })
                .then((res) => {
                    console.log('验车订单修改成功', res)
                })
                .catch((err) => {
                    console.log('验车订单修改失败', err)
                });
            this.$router.push('/order')
        },

        // 查询所有区域
        selectAll() {
            this.$http({
                url: '/area/selectAll',
                method: 'POST',
            })
                .then((res) => {
                    console.log('查询所有区域数据成功', res.data.data);
                    this.areaData = res.data.data

                })
                .catch((err) => {
                    console.log('查询所有区域获取失败', err);
                })
        },
        // 联动区域查询司机 
        selectDriver(areaName) {
            this.$http({
                url: '/area/selectDriver',
                method: 'GET',
                params: {
                    areaName
                }
            })
                .then((res) => {
                    console.log('联动区域查询司机数据成功', res.data.data[0]);

                    this.getDriverData = res.data.data[0];
                    this.reDriverData = res.data.data[0];
                })
                .catch((err) => {
                    console.log('联动区域查询司机失败', err);
                })
        },
        driverChange(areaName) {
            // item.area
            console.log('传入的值', areaName)
            this.selectDriver(areaName)
        },
        //点击订单编号跳转页面 
        selectOrderDetail(number, type) {
            console.log('传入的编号类型', number, type)
            this.$http({
                url: '/order/selectOrderDetail',
                method: 'POST',
                data: {
                    number, type
                }
            })
                .then((res) => {
                    this.orderInfo = res.data.order;
                    this.orderDetail = res.data.orderDetail;
                    this.fuZhi();
                    console.log('新页面', res.data)
                    console.log('新页面order', this.orderInfo)
                    console.log('新页面detail', this.orderDetail)

                })
                .catch((err) => {
                    console.log('跳转订单失败', err)
                })
        },
        // 下拉选择框，获取订单状态
        getStatus() {
            this.$http({
                url: '/order/getStatus',
                method: 'GET',
            })
                .then((res) => {
                    console.log('订单状态数据', res.data);
                    this.getStatusData = res.data.data
                })
                .catch((err) => {
                    console.log('订单状态获取失败', err);
                })
        },


    },

}


</script>

<style lang="scss" scoped>
.box {
    min-width: 1200px;
    height: 1000px;

    h1 {
        font-size: 30px;
    }

    hr {
        margin: 20px 0 20px 0;
        border-top: 2px solid rgba(128, 128, 128, 0.753);
    }


    .main {
        margin: 0 auto;
        width: 1200px;

        .left {
            min-width: 300px;
            // margin-left: 20px;
            float: left;

            .selectStyleDiv {
                margin: 15px 0px 20px 0;
            }

            .left-1 {
                // margin-top: 10px;
                min-width: 300px;

                div {
                    margin-top: 10px;
                }
            }
        }

        .middle {
            min-width: 300px;
            margin-left: 150px;
            float: left;

            .message-left {
                float: left;
            }

            .message-right {
                float: right;
            }

        }

        .right {
            float: left;
            // margin-right: 40px;
            margin-left: 150px;
            min-width: 260px;
        }
    }

    .Bottom15px {
        margin: 15px 0px 15px 0;
    }

    .selectStyle {
        float: left;
        margin-right: 20px;
        width: 120px;
    }

    .input2 {
        width: 260px;
        margin: 15px 0px 15px 0;
    }

    .textarea1 {
        width: 260;
        height: 110px;
    }



    .pay {
        float: left;
    }

    .pay li,
    .pay1 li {
        margin: 15px 10px 15px 10px;
    }

    .right-1 {
        height: 400px;
    }
}

.save {
    text-align: center;
    padding: 30px 0;

    .saveBtn {
        margin-right: 50px;
        margin-left: -50px;
    }

    .cancelBtn {
        margin-left: 50px;
    }

}
</style>